<template>
  <div class="advertising">
    <div class="header">
      <p class="header-title">广告模板</p>
    </div>
    <div class="ad_content flex-row flex-wrap flex-justify-content-fs flex-align-items-c">
      <div class="ad_item" v-for="(item,index) in adDataList" :key="index">
        <div class="flex-row flex-align-items-c flex-justify-content-sb">
          <!-- <span v-if="item.username!==''">来自：{{item.username}}</span> -->
          <span>{{item.name}}</span>
          <span @click="getMacine(item.id)" style="padding:5px 0;color:#409EFF;">投放设备：{{item.machine}}台</span>
        </div>
        <div @mouseenter="showADTelplate(index)">
          <video v-if="item.type == 'video'" :src="item.album"></video>
          <img v-else :src="item.album" alt />
        </div>
        <div class="flex-row flex-align-items-c flex-justify-content-sb">
          <span>观看人数：{{item.viewers}}</span>
          <span @click="playTimer(item.id)" style='color:#409EFF;'>播放次数：{{item.playtimes}}</span>
          <span>播放时长：{{item.time}}</span>
        </div>
        <div
          class="mask"
          :style="item.stats==1?'width:80px;heigth:80px;':''"
          @mouseenter="showADTelplate(index)"
        >
          <img :src="stateImg[item.stats]" alt />
        </div>
        <div
          class="ad_item_mask flex-row flex-align-items-c flex-justify-content-c"
          v-if="adDataList[index].isMaks"
          @mouseleave="showADTelplate(index)"
        >
          <i class="el-icon-zoom-in" v-if="item.stats==1" @click="selectedADTemplate(index)"></i>
          <i class="el-icon-delete" @click="showDeltetDialog(index)"></i>
        </div>
      </div>
      <div class="ad_item_add flex-column" @click="addTemplate">
        <img src="../../assets/images/add.png" alt />
      </div>
    </div>
    <div class="flex-row flex-justify-content-c" style="margin-top:50px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageMeta.total"
        :current-page="pageMeta.current_page"
        :page-size="pageSizes"
        :hide-on-single-page="hideValue"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" width="30%">
      <el-select v-model="devicevalue" clearable placeholder="请选择" @change='changeDevice' @clear='clear' v-if="dialogTitle !=='投放设备'">
        <el-option
          v-for="item in deviceOptions"
          :key="item.id"
          :label="item.name"
          :value="item.machine_id">
        </el-option>
      </el-select>
      <el-table :data="gridData" max-height="400">
        <el-table-column v-if="dialogTitle=='投放设备'" property="name" label="设备名称"></el-table-column>
        <el-table-column property="date" :label="labelTitle"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" v-if="dialogTitle=='投放设备'">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="outClick(scope.row)">删除投放</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column property="name" label="姓名" width="200"></el-table-column> -->
        <!-- <el-table-column property="address" label="地址"></el-table-column> -->
      </el-table>
      <div
        v-show="dialogTitle=='投放设备'"
        class="flex-row flex-justify-content-c"
        style="margin-top:50px;"
      >
        <el-pagination
          background
          layout="prev, pager, next"
          :total="dialogPageMeta.total"
          :current-page="dialogPageMeta.current_page"
          :page-size="pageSizes"
          @current-change="dialogHandleCurrentChange"
        ></el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="deltetDialog" width="15%" center>
      <span style="text-align:center;display:inline-block;width:100%;">是否删除模板？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deltetDialog = false">取 消</el-button>
        <el-button type="primary" @click="delADtemplate(deltetIndex)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      adDataList: [],
      deviceID: '',
      pageSizes: 11,
      currentPage: 1,
      pageMeta: [],
      hideValue: true,
      playTimerList: [],
      dialogTableVisible: false,
      gridData: [],
      page: 1,
      sort: 'DESC',
      dialogTitle: '播放时间',
      labelTitle: '日期',
      dialogPageMeta: [],
      macineId: '',
      stateImg: [
        require('../../assets/images/under.png'),
        require('../../assets/images/shenhe-success.png'),
        require('../../assets/images/pass.png')
      ],
      deltetDialog: false,
      deltetIndex: '',
      deviceOptions: [
      //   {
      //   value: '选项1',
      //   label: '黄金糕'
      // }
      ],
      devicevalue: '',
      adplateId: ''
    }
  },
  computed: {},
  created () {
    // console.log(this.$route.params)
    this.$route.params.id
      ? (this.deviceID = this.$route.params.id)
      : (this.deviceID = '')
    this.getAdList()
  },
  mounted () {},
  watch: {},
  methods: {
    addTemplate () {
      this.$router.push({
        path: 'addtemplate'
      })
    },
    selectedADTemplate (index) {
      console.log(this.adDataList[index].username)
      console.log(index)
      this.$router.push({
        path: 'material',
        query: {
          id: this.adDataList[index].id
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getAdList()
    },
    dialogHandleCurrentChange (val) {
      this.page = val
      this.getMacine(this.macineId)
    },
    getAdList () {
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&machine_id=${this.deviceID}&page_size=${this.pageSizes}&page=${
        this.currentPage
      }`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.http
        .getAdList({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            this.adDataList = res.data.result.data
            this.pageMeta = res.data.result.meta
            this.hideValue = false
            this.currentPage = res.data.result.meta.total_pages
            this.adDataList.forEach((el, index) => {
              this.adDataList[index].isMaks = false
            })
          } else {
            this.$message.error({
              message: res.data.errmsg
            })
          }
        }).catch(err => {})
    },
    playTimer (id) {
      console.log(id)
      this.adplateId = id
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&adplate_id=${id}`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.gridData = []
      this.http
        .getPlaytimes({
          secret: RASCODE
        })
        .then(res => {
          if (res.data.errno == '000') {
            this.dialogTableVisible = true
            this.gridData.shift()
            this.dialogTitle = '播放时间'
            this.labelTitle = '日期'
            res.data.result.forEach(element => {
              this.gridData.push({
                date: element
              })
            })
          } else {
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {})
      this.http.getPlateMachine({ secret: RASCODE }).then(res => {
        console.log(res)
        if (res.data.errno == '000') {
          this.deviceOptions = res.data.result.data
        } else {
          this.deviceOptions = []
        }
      }).catch(err => {})
    },
    getMacine (id) {
      this.macineId = id
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&adplate_id=${id}&page=${this.page}&page_size=${this.pageSizes}&sort=${
        this.sort
      }`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.gridData = []
      this.http
        .getPlateMachine({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            this.dialogTitle = '投放设备'
            this.labelTitle = '设备地址'
            this.dialogPageMeta = res.data.result.meta
            this.dialogTableVisible = true
            res.data.result.data.forEach(element => {
              this.gridData.push({
                date: element.name,
                name: element.mac_number,
                id: element.machine_id
              })
            })
          } else {
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {})
    },
    outClick (row) {
      console.log(row.id)
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&adplate_id=${this.macineId}&machine_id=${row.id}`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.http
        .outPlateMachine({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            this.getMacine(this.macineId)
            this.getAdList()
          } else {
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    showADTelplate (index) {
      let list = this.adDataList[index]
      // console.log(list)
      list.isMaks = !this.adDataList[index].isMaks
      this.adDataList.splice(index, 1, list)
    },
    /** 删除模板 */
    showDeltetDialog (index) {
      if (this.adDataList[index].machine > 0) {
        this.$message.error({
          message: '当前模板存在投放设备，请将模板从该设备上移除后重试！'
        })
        return false
      }
      this.deltetDialog = !this.deltetDialog
      this.deltetIndex = index
    },
    delADtemplate (index) {
      console.log(index)
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&adplate_id=${this.adDataList[index].id}`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.http
        .deleteADTtemplate({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            this.deltetDialog = !this.deltetDialog
            this.adDataList.splice(index, 1)
            this.$message.success({
              message: res.data.errmsg
            })
          } else {
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {})
    },
    // getPlateMachine (machineId) {

    // },
    changeDevice () {
      console.log('changeDevice')
      this.macineId = this.devicevalue
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&adplate_id=${this.adplateId}&machine_id=${this.devicevalue}`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.gridData = []
      this.http
        .getPlaytimes({
          secret: RASCODE
        })
        .then(res => {
          if (res.data.errno == '000') {
            this.dialogTableVisible = true
            this.gridData.shift()
            this.dialogTitle = '播放时间'
            this.labelTitle = '日期'
            res.data.result.forEach(element => {
              this.gridData.push({
                date: element
              })
            })
          } else {
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {})
    },
    clear () {
      this.playTimer(this.adplateId)
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
